<template>
  <div>
    <tableBody
      ref="table"
      :tableConfig="tableConfig"
      :queryApi="queryApi"
      :isOperate="true"
      :operateWidth="130"
    >
      <template v-slot:operate="slotProps">
        <el-button
          v-if="userInfo.type == 1"
          size="small"
          type="warning"
          @click="handleUpd(slotProps.scope.row)"
          >回复</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="handleDel(slotProps.scope.row)"
          >删除</el-button
        >
      </template>
    </tableBody>

    <el-dialog v-model="updFormVisible" title="回复留言" width="500" center>
      <el-form size="small" :model="replyForm" label-width="80px">
        <el-form-item label="留言ID:">
          {{ replyForm.commentid }}
        </el-form-item>
        <el-form-item label="留言姓名:">
          {{ replyForm.username }}
        </el-form-item>
        <el-form-item label="留言内容:">
          {{ replyForm.content }}
        </el-form-item>
        <el-form-item label="回复内容:">
          <el-input v-model="replyForm.replycontent" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="save()">更新</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import tableList from "@/utils/tableBody";
import tableBody from "@/components/tableBody.vue";
import { onMounted, reactive, ref, computed } from "vue";
import { addReply, delComment } from "@/api/comment";
import { ElMessage, ElMessageBox } from "element-plus";
import { CODE } from "@/utils/StatusCode";
import { useStore } from "vuex";

const tableConfig = reactive(tableList.commentList);
const queryApi = ref("/comment/page");

const store = useStore();

const userInfo = computed(() => {
  return store.getters.getUserInfo;
});
onMounted(() => {
  query({});
});
const table = ref(null);
function query(data: any) {
  data.userid = userInfo.value.type == 1 ? "" : userInfo.value.userid;
  (table as any).value.onSearch(data);
}
// 回复
const updFormVisible = ref(false);
const replyForm = reactive({
  commentid: "",
  userid: "",
  commentquestion: "",
  commenttime: "",
  content: "",
  status: "",
  username: "",
  replycontent: "",
});
function handleUpd(row: any) {
  Object.keys(replyForm).forEach((fieId) => {
    replyForm[fieId] = row[fieId];
  });
  updFormVisible.value = true;
}
// 保存
async function save() {
  const res = await addReply(replyForm);
  if (res.code == CODE.OK) {
    ElMessage({
      message: res.message,
      type: "success",
    });
    updFormVisible.value = false;
    query({});
  } else {
    ElMessage({
      message: res.message,
      type: "error",
    });
  }
}
// 删除
function handleDel(row: any) {
  if (!row.commentid) return;
  ElMessageBox.confirm("是否删除此留言", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const res = await delComment({
        commentid: row.commentid,
      });
      if (res.code == CODE.OK) {
        ElMessage({
          message: res.message,
          type: "success",
        });
        query({});
      } else {
        ElMessage({
          message: res.message,
          type: "error",
        });
      }
    })
    .catch(() => {});
}
</script>

<style lang="less" scoped></style>
